// tslint:disable:no-empty
import React from 'react';
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} from 'react-native';

export default class Button extends React.Component {
  static defaultProps = {
    pressIn: false,
    disabled: false,
    activeStyle: {},
    loading: false,

    onClick: (_?: any) => {},
    onPressIn: (_?: any) => {},
    onPressOut: (_?: any) => {},
    onShowUnderlay: (_?: any) => {},
    onHideUnderlay: (_?: any) => {},

  };

  constructor(props) {
    super(props);
    this.state = {
      pressIn: false,
      touchIt: false,
    };
  }

  onPressIn = (...arg: any[]) => {
    this.setState({ pressIn: true });
    if (this.props.onPressIn) {
      (this.props.onPressIn)(...arg);
    }
  }
  onPressOut = (...arg: any[]) => {
    this.setState({ pressIn: false });
    if (this.props.onPressOut) {
      (this.props.onPressOut)(...arg);
    }
  }
  onShowUnderlay = (...arg: any[]) => {
    this.setState({ touchIt: true });
    if (this.props.onShowUnderlay) {
      (this.props.onShowUnderlay)(...arg);
    }
  }
  onHideUnderlay = (...arg: any[]) => {
    this.setState({ touchIt: false });
    if (this.props.onHideUnderlay) {
      (this.props.onHideUnderlay)(...arg);
    }
  }

  render() {
    const {
      size = 'large',
      type = 'default',
      disabled,
      activeStyle,
      onClick,
      style,
      loading,
      ...restProps,
    } = this.props;

    const textStyle = [
      styles[`${size}RawText`],
      styles[`${type}RawText`],
      disabled && styles[`${type}DisabledRawText`],
      this.state.pressIn && styles[`${type}HighlightText`],
    ];

    const wrapperStyle = [
      styles.wrapperStyle,
      styles[`${size}Raw`],
      styles[`${type}Raw`],
      disabled && styles[`${type}DisabledRaw`],
      this.state.pressIn && activeStyle && styles[`${type}Highlight`],
      activeStyle && this.state.touchIt && activeStyle,
      style,
    ];

    const underlayColor = (StyleSheet.flatten(
      styles[activeStyle ? `${type}Highlight` : `${type}Raw`],
    )).backgroundColor;

    const indicatorColor = (StyleSheet.flatten(
      this.state.pressIn
        ? styles[`${type}HighlightText`]
        : styles[`${type}RawText`],
    )).color;

    return (
      <TouchableHighlight
        {...restProps}
        style={wrapperStyle}
        disabled={disabled}
        activeOpacity={1}
        underlayColor={underlayColor}
        onPress={(e?: any) => onClick && onClick(e)}
        onPressIn={this.onPressIn}
        onPressOut={this.onPressOut}
        onShowUnderlay={this.onShowUnderlay}
        onHideUnderlay={this.onHideUnderlay}
      >
        <View style={styles.container}>
          {loading ? (
            <ActivityIndicator
              style={styles.indicator}
              animating
              color={indicatorColor}
              size="small"
            />
          ) : null}
          <Text style={textStyle}>{this.props.children}</Text>
        </View>
      </TouchableHighlight>
    );
  }
}

const styles= StyleSheet.create({
  container: {
    flexDirection: 'row',
  } ,
  defaultHighlight: {
    backgroundColor: '#dddddd',
    borderColor: '#dddddd',
  },
  primaryHighlight: {
    backgroundColor: '#0e80d2',
    borderColor:'#dddddd',
  },
  ghostHighlight: {
    backgroundColor: 'transparent',
    borderColor: '#108ee9',
  },
  warningHighlight: {
    backgroundColor: '#d24747',
    borderColor: '#e94f4f',
  },
  wrapperStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 5,
    borderWidth: 1,
  },
  largeRaw: {
    height: 47,
    paddingLeft: 15,
    paddingRight: 15,
  },
  smallRaw: {
    height: 23,
    paddingLeft: 5,
    paddingRight: 5,
  },
  defaultRaw: {
    backgroundColor: '#ffffff',
    borderColor: '#dddddd',
  },
  primaryRaw: {
    backgroundColor: '#108ee9',
    borderColor: '#108ee9',
  },
  ghostRaw: {
    backgroundColor: 'transparent',
    borderColor: '#108ee9',
  },
  warningRaw: {
    backgroundColor: '#e94f4f',
    borderColor: '#e94f4f',
  },
  defaultDisabledRaw: {
    backgroundColor: '#dddddd',
    borderColor: '#dddddd',
  },
  primaryDisabledRaw: {
    opacity: 0.4,
  },
  ghostDisabledRaw: {
    borderColor: '#0000001A', // alpha 10%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  warningDisabledRaw: {
    opacity: 0.4,
  },
  defaultHighlightText: {
    color: '#000000',
  },
  primaryHighlightText: {
    color: '#ffffff4D', // alpha 30%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  ghostHighlightText: {
    color: '#108ee9',
  },
  warningHighlightText: {
    color: '#ffffff4D', // alpha 30%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  largeRawText: {
    fontSize: 18,
  },
  smallRawText: {
    fontSize: 12,
  },
  defaultRawText: {
    color: '#000000',
  },
  primaryRawText: {
    color: '#ffffff',
  },
  ghostRawText: {
    color: '#108ee9',
  },
  warningRawText: {
    color: '#ffffff',
  },
  defaultDisabledRawText: {
    color: '#0000004D', // alpha 30%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  primaryDisabledRawText: {
    color: '#ffffff99', // alpha 60%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  ghostDisabledRawText: {
    color: '#0000001A', // alpha 10%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  warningDisabledRawText: {
    color: '#ffffff99', // alpha 60%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  indicator: {
    marginRight: 8,
  },
})
